<!--footer-->
<style>
#box {
	position: fixed;
	bottom:0;
	width: 100%;
	height: 200px;
	border: 2px solid;
    background-color: white;
}

/*чат*/
/* Важное свойство */
.chat {
	overflow: auto; /* Это позволяет отображать полусу прокрутки */
	position: relative;  /*Это позволяет съезжать тексту в слое, не растягия страницу */
    width: 80%;
    height: 170px;
    float: left;
    
}
.chat_online {
	overflow: auto; /* Это позволяет отображать полусу прокрутки */
	position: relative;  /*Это позволяет съезжать тексту в слое, не растягия страницу */
    width: 20%;
    height: 170px;
}
.chat span {
	display: block;
}
.hz {
	margin:5px;
}

.form {
	float: left;
}

.bt {
    width: 100%;
	height: 200px;
    background-color: black;
}
</style>

<script type="text/javascript">
//чат
$(document).ready(function () {
    $("#pac_form").submit(Send); // вешаем на форму с именем и сообщением событие которое срабатывает кодга нажата кнопка "Отправить" или "Enter"
    $("#pac_text").focus(); // по поле ввода сообщения ставим фокус
    setInterval("Load();", 2000); // создаём таймер который будет вызывать загрузку сообщений каждые 2 секунды (2000 милесукунд)
});    

// Функция для отправки сообщения
function Send() {
    // Выполняем запрос к серверу с помощью jquery ajax: $.post(адрес, {параметры запроса}, функция которая вызывается по завершению запроса)
    $.post("chat/ajax.php",  
	{
        act: "send",  // указываем скрипту, что мы отправляем новое сообщение и его нужно записать
        name: '<?= $tpl['name']; ?>', // имя пользователя
        text: $("#pac_text").val() //  сам текст сообщения
    },
     Load ); // по завершению отправки вызвовем функцию загрузки новых сообщений Load()

    $("#pac_text").val(""); // очистим поле ввода сообщения
    $("#pac_text").focus(); // и поставим на него фокус
    
    return false; // очень важно из Send() вернуть false. Если этого не сделать то произойдёт отправка нашей формы, те страница перезагрузится
}

var last_message_id = 0; // номер последнего сообщения, что получил пользователь
var load_in_process = false; // можем ли мы выполнять сейчас загрузку сообщений. Сначала стоит false, что значит - да, можем

// Функция для загрузки сообщений
function Load() {
    // Проверяем можем ли мы загружать сообщения. Это сделанно для того, что бы мы не начали загрузку заново, если старая загрузка ещё не закончилась.
    if(!load_in_process)
    {
	    load_in_process = true; // загрузка началась
        
	    // отсылаем запрос серверу, который вернёт нам javascript
    	$.post("chat/ajax.php", 
    	{
      	    act: "load", // указываем на то что это загрузка сообщений
      	    last: last_message_id, // передаём номер последнего сообщения который получил пользователь в прошлую загрузку
      	    rand: (new Date()).getTime()
    	},
   	    function (result) { // в эту функцию в качестве параметра передаётся javascript код, который мы должны выполнить
		    eval(result); // выполняем скрипт полученный от сервера
		    $(".chat").scrollTop($(".chat").get(0).scrollHeight); // прокручиваем сообщения вниз
		    load_in_process = false; // говорим что загрузка закончилась, можем теперь начать новую загрузку
    	});
    }
}
function prv(el){
    $('#pac_name').val(el.id);
}
</script>
<div class="bt"></div>
<div id='box'>

    <!-- Вот в этих 2-х div'ах будут идти наши сообщения из чата -->
    <div class="chat">
        <div id="chat_area"><!-- Сюда мы будем добавлять новые сообщения --></div>
    </div>
    <div class="chat_online">
        <div id="online_area"> Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/>Люди онлайн<br/> </div>
    </div>
    
    <div align="left">
    <form class="form" id="pac_form" action=""><!-- Наша форма с именем, сообщением и кнопкой для отправки -->
        <input type="text" id="pac_name"  value=""/></td>
        <input type="text" size="150" id="pac_text"  value=""/></td>
        <input type="submit" value="Отправить"/></td>
    </form>
    <div>Смайлы</div>
    </div>
</div>
</body></html>